<template>
    <el-card class="scroll-item" shadow="always">
        <div slot="header" class="d-flex align-items-center">
            <i :class="'iconfont icon-' + icon"></i>
            <span>{{ cardHeader }}</span>
        </div>
        <div class="text item">
            <!-- <el-link :underline="false" v-for="(item, index) in articles" @click="view(item.id)" :style="itemStyle"
                :key="index"><i>{{ index + 1 }}</i> {{ item.name }}</el-link> -->

            <nuxt-link
                v-for="(item, index) in articles" :key="index" :to="{ path: `/view/${item.id}` }" class="el-link"
                :style="itemStyle" active-class="current" exact>
                <i>{{ index + 1 }}</i> {{ item.name }}
            </nuxt-link>
        </div>
    </el-card>
</template>

<script>
export default {
    name: 'CardArticle',
    props: {
        cardHeader: {
            type: String,
            required: true
        },
        icon: {
            type: String,
            required: true
        },
        articles: {
            type: Array,
            required: true
        },
        itemStyle: Object
    },
    data() {
        return {
            msg: 'Welcome to Your Vue.js App'
        }
    },
    methods: {
        view(id) {
            this.$router.push({ path: `/view/${id}` })
        }
    }
}
</script>
<style lang="less" scoped>
.el-card {
    i {
        font-size: 14px;
        color: #437dff;
        font-weight: bold;
        padding: 0 5px 0 0;

        &.icon-hot {
            color: #e13455;
        }

    }

    span {
        font-weight: bold;
    }

    .item {
        font-size: 14px;

        .el-link {
            display: block;
            line-height: 2.5;
            clear: both;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            &:hover{
                color: #409EFF;
            }
        }

    }

}

</style>